<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>蓝源Eloan-P2P平台->用户登录</title>
    <link rel="stylesheet" href="/js/bootstrap-3.3.2-dist/css/bootstrap.css" type="text/css"/>
    <link rel="stylesheet" href="/css/core.css" type="text/css"/>
    <script type="text/javascript" src="/js/jquery/jquery-2.1.3.js"></script>
    <script type="text/javascript" src="/js/bootstrap-3.3.2-dist/js/bootstrap.js"></script>
    <script type="text/javascript" src="/js/jquery.bootstrap.min.js"></script>
    <script type="text/javascript" src="/js/plugins/jquery-validation/jquery.validate.js"></script>
    <script type="text/javascript" src="/js/plugins/jquery-validation/localization/messages_zh.js"></script>
    <script type="text/javascript" src="/js/plugins/jquery.form.js"></script>

    <style type="text/css">
        .el-login-form {
            width: 600px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 20px;
        }

        .el-login-form .form-control {
            width: 220px;
            display: inline;
        }
    </style>

    <script type="text/javascript">

        //手机号码格式验证--正则表达式
        function isPhoneAvailable(phonenum) {
            var format = /^[1][0-9]{10}$/;   //最简单的正则表达, 做测试用
            return format.test(phonenum);
        }

        $(function () {
            jQuery.validator.addMethod("isPhoneNum", function (value, element) {
                return isPhoneAvailable(value); //调用上面方法
            }, '请输入正确的手机号码格式');

            $('#loginForm').validate({
                //submitHandler: 数据校验成功执行函数发送ajax请求提交表单
                submitHandler: function (form) {
                    $(form).ajaxSubmit(function (data) {
                        if (data.success) {
                            $.messager.confirm("温馨提示:", "登录成功,点击确认跳转个人中心", function () {
                                window.location.href = "/personal";
                            })
                        } else {
                            $.messager.alert("提示", data.msg);
                        }
                    });
                },
                //highlight 给无效的字段元素加高亮提醒效果加红色样式
                highlight: function (element, errorClass) {
                    $(element).fadeOut(function () {
                        $(element).fadeIn();
                    });
                    $(element).closest('div.form-group').addClass('has-error').removeClass('has-success')
                },
                //unhighlight
                unhighlight: function (element, errorClass) {
                    $(element).closest('div.form-group').addClass('has-success').removeClass('has-error')
                },

                //使用bootstrap改变样式
                errorClass: "text-danger",
                rules:
                    {
                        username: {
                            required: true,
                            rangelength:
                                [11, 11],
                            'isPhoneNum':
                                'isPhoneNum'
                        }
                        ,
                        password: {
                            required: true,
                            rangelength:
                                [4, 16]
                        }
                    }
                ,
                messages: {
                    username: {
                        required: "手机号必填",
                        rangelength:
                            "手机号{0}位",
                        remote:
                            "该手机号已被注册"
                    }
                    ,
                    password: {
                        required: "密码必填",
                        rangelength:
                            "密码{0}-{1}位"
                    }
                }
            })
            ;

        });

    </script>

</head>
<body>
<!-- 网页头信息 -->
<div class="el-header">
    <div class="container" style="position: relative;">
        <ul class="nav navbar-nav navbar-right">
            <li><a href="/">首页</a></li>
            <li><a href="/login.html">登录</a></li>
            <li><a href="#">帮助</a></li>
        </ul>
    </div>
</div>

<!-- 网页导航 -->
<div class="navbar navbar-default el-navbar">
    <div class="container">
        <div class="navbar-header">
            <a href=""><img alt="Brand" src="/images/logo.png"></a>
            <span class="el-page-title">用户登录</span>
        </div>
    </div>
</div>

<!-- 网页内容 -->
<div class="container">
    <form id="loginForm" class="form-horizontal el-login-form" action="/login" method="post">
        <p class="h4" style="margin: 10px 10px 20px 110px;color:#999;">请输入用户名和密码</p>
        <div class="form-group">
            <label class="control-label col-sm-2">用户名</label>
            <div class="col-sm-10">
                <input type="text" autocomplete="off" name="username" class="form-control" value="15815858001"/>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-2">密&emsp;码</label>
            <div class="col-sm-10">
                <input type="password" autocomplete="off" name="password" class="form-control" value="0000"/>
            </div>
        </div>
        <div class="form-gorup">
            <div class="col-sm-offset-3">
                <button type="submit" class="btn btn-success" style="width: 100px;">
                    登录
                </button>
                &emsp;&emsp;
                <a href="/register.html">新用户，马上注册</a>
            </div>
        </div>
    </form>
</div>


<!-- 网页版权 -->
<div class="container-foot-2">
    <div class="context">
        <div class="left">
            <p>专注于高级Java开发工程师的培养</p>
            <p>版权所有：&emsp;2015广州小码哥教育科技有限公司</p>
            <p>地&emsp;&emsp;址：&emsp;广州市天河区棠下荷光三横路盛达商务园D座5楼</p>
            <p>电&emsp;&emsp;话： 020-29007520&emsp;&emsp;
                邮箱：&emsp;service@520it.com</p>
            <p>
                <a href="http://www.miitbeian.gov.cn" style="color: #ffffff">ICP备案
                    ：粤ICP备字1504547</a>
            </p>
            <p>
                <a href="http://www.gzjd.gov.cn/wlaqjc/open/validateSite.do"
                   style="color: #ffffff">穗公网安备：44010650010086</a>
            </p>
        </div>
        <div class="right">
            <a target="_blank" href="http://weibo.com/ITxiaomage"><img
                    src="/images/sina.png"></a>
        </div>
        <div class="clearfix"></div>
    </div>
</div>
</body>
</html>